<template>
  <div>

    <div class="item-content">
      <div class="map-content">
        <baidu-map class="map" :center="{lng: 107.241123, lat:34.366293}" :zoom="15" :scroll-wheel-zoom="true"
                   :theme="mapTheme">
          <div v-for="marker of markers" v-if="markers" class="map-title">
            <bm-marker :position="{lng: marker.longitude, lat: marker.latitude}"
                       :title="marker.scenicName"
                       :icon="{url: img, size: {width: 60, height: 67}}"
                       @click="infoWindowClose(marker,markers)"
            >
              <!--               @mouseover="infoWindowOpen(marker)"-->
              <my-overlay
                :position="{lng: marker.longitude, lat: marker.latitude}"
                :text="marker.scenicName"
                :id="marker.id"
                :active="active"
                @childFn="close"
                :show="marker.showFlag"
                @mouseover.native="active = true"
              >
              </my-overlay>
            </bm-marker>

          </div>
        </baidu-map>

      </div>
      <div class="item-header"> 大屏展示平台一</div>
      <div class="item-center">
        <div class="item-title">监控数据汇总</div>
        <div ref="commandstats5" class="echarsPie "
             style="width:98%; height:70%; margin: 0 auto; margin-top: 30px;"></div>
      </div>
      <div class="item-left">
        <div class="item-left-Box" style="height:40%">
          <div class="item-big-box">
            <div class="item-title">用电情况统计</div>
            <div ref="commandstats" class="echarsPie "
                 style="width: 80%; height:70%; margin: 0 auto; margin-top: 30px;"></div>
          </div>

        </div>
        <div class="item-left-Box" style="height:58%">
          <div class="item-big-box" style="height: 100%">
            <div class="item-title">投诉情况统计</div>
            <div class="complaint">
              <div class="complaint-item">
                <div ref="commandstats2" class="echarsPie " style="width: 80%; height:70%; margin: 0 auto;"></div>
                <div class="complaint-item-title">全部投诉</div>
              </div>
              <div class="complaint-item">
                <div ref="commandstats3" class="echarsPie " style="width: 80%; height:70%; margin: 0 auto;"></div>
                <div class="complaint-item-title">已处理</div>
              </div>
              <div class="complaint-item">
                <div ref="commandstats4" class="echarsPie " style="width: 80%; height:70%; margin: 0 auto;"></div>
                <div class="complaint-item-title">未处理</div>
              </div>
            </div>
            <div class="conmplaint-mouth">
              <div class=" conmplaint-mouth-title" @click="current(1)" :class="{'border':activeIndex==1}">月度</div>
              <div class="conmplaint-mouth-title" @click="current(2)"  :class="{'border':activeIndex==2}">季度</div>
              <div class="conmplaint-mouth-title" @click="current(3)" :class="{'border':activeIndex==3}">年度</div>
            </div>

            <div class="conmplaint-line">
              <div class="line-title">全部投诉</div>
              <div class="line">

                <div class="l-line" :style="{width:(yue1/yue1)*100+'%'}"></div>
              </div>
              <div class="line-number">{{yue1}}</div>

            </div>
            <div class="conmplaint-line">
              <div class="line-title">未处理</div>
              <div class="line">
                <div class="l-line"  :style="{width:(yue2/yue1)*100+'%'}"></div>
              </div>
              <div class="line-number">{{yue2}}</div>

            </div>
            <div class="conmplaint-line">
              <div class="line-title">已处理</div>
              <div class="line">
                <div class="l-line"  :style="{width:(yue3/yue1)*100+'%'}"></div>
              </div>
              <div class="line-number">{{yue3}}</div>

            </div>
          </div>

        </div>
      </div>
      <div class="item-right">
        <div class="item-left-Box" style="text-align: right; height:70%;   ">
          <div class="item-big-box" style="height: 100%; display: inline-block">
            <div class="item-title">监管设备统计</div>
            <div class="item-order">
              <div style="display: flex;">

                <div class="item-order-number  item-order-number-item  ">43</div>
                <div class="item-order-title">
                  <div class="item-o-t">马营镇</div>
                  <div class="item-order-subtitle">12121</div>

                </div>
              </div>

              <div class="item-order-button">定位</div>
            </div>
            <div class="item-order">
              <div style="display: flex;">

                <div class="item-order-number  equipment-red">43</div>
                <div class="item-order-title">
                  <div class="item-o-t">马营镇</div>
                  <div class="item-order-subtitle">12121</div>

                </div>
              </div>

              <div class="item-order-button">定位</div>
            </div>
            <div class="item-order">
              <div style="display: flex;">

                <div class="item-order-number item-order-number-item ">43</div>
                <div class="item-order-title">
                  <div class="item-o-t">马营镇</div>
                  <div class="item-order-subtitle">12121</div>

                </div>
              </div>

              <div class="item-order-button">定位</div>
            </div>
            <div class="item-order">
              <div style="display: flex;">

                <div class="item-order-number equipment-yellow">43</div>
                <div class="item-order-title">
                  <div class="item-o-t">马营镇</div>
                  <div class="item-order-subtitle">12121</div>

                </div>
              </div>

              <div class="item-order-button">定位</div>
            </div>
            <div class="item-order">
              <div style="display: flex;">

                <div class="item-order-number equipment-yellow">43</div>
                <div class="item-order-title">
                  <div class="item-o-t">马营镇</div>
                  <div class="item-order-subtitle">12121</div>

                </div>
              </div>

              <div class="item-order-button">定位</div>
            </div>


          </div>

        </div>
        <div class="item-left-Box" style="text-align: right">
          <div class="item-big-box" style="height: 95%; display: inline-block; margin-top:3%">
            <div class="item-big-box-t">
              <div class="item-big-box-count">
                <div class="cityIcon2"></div>
              </div>
              <div class="item-big-box-count">
                <div class="i-b-c-c">
                  <span>本月出勤</span>
                  <span>12312</span>
                </div>
                <div class="i-b-c-c">
                  <span>上月出勤</span>
                  <span>213123</span>
                </div>
                <div class="i-b-c-c">
                  <span>本周出勤</span>
                  <span>123123</span>
                </div>
                <div class="i-b-c-c">
                  <span>昨日出勤</span>
                  <span>21312</span>
                </div>
                <!-- </div>
                  <div class="i-b-c-c" >
               <span>昨日出勤</span>
               <span></span>
            </div> -->
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import mapStyle from '@/assets/custom_map_config.json';
import echarts from "echarts";
import {largeOne, listInfo_common} from "@/api/enterprise/info";
import MyOverlay from '@/components/myoverlay/myOverlay'

export default {
  name: "itemOne",
  components: {
    MyOverlay
  },
  data() {
    return {
      markers: [],
      img: require("../../assets/images/changtonggongcheng.png"),
      mapTheme: mapStyle,
      active: false,
      mContent:"",
      yue1:"",
      yue2:"",
      yue3:"",
      activeIndex:"1",

    }
  },
  mounted() {
    this.getEchars();
    this.getInfo();
    this.largeOne();
    // this.current(1)

  },
  methods: {
// 切换月季度
    current(index){
        this.activeIndex=index;

        if(index==1){
          this.yue1=this.mContent.monthAll
          this.yue2=this.mContent.monthAll_no
          this.yue3=this.mContent.monthAll_yes
          this.getEcharsTs(this.yue1,this.yue2,this.yue3);

        }else if(index==2){
          this.yue1=this.mContent.jiduAllList
          this.yue2=this.mContent.jiduAll_no
          this.yue3=this.mContent.jiduAll_yes
        }else if(index==3){
          this.yue1=this.mContent.yearAllList
          this.yue2=this.mContent.yearAll_no
          this.yue3=this.mContent.yearAll_yes
        }
      this.getEcharsTs(this.yue1,this.yue2,this.yue3);
      this.getEcharsYcl(this.yue1,this.yue2,this.yue3);
      this.getEcharsWcl(this.yue1,this.yue2,this.yue3)
    },
    largeOne() {
      largeOne().then(res => {
       this.mContent=res.data;
        this.yue1=this.mContent.monthAll
        this.yue2=this.mContent.monthAll_no
        this.yue3=this.mContent.monthAll_yes
        this.getEcharsTs(this.yue1,this.yue2,this.yue3);
        this.getEcharsYcl(this.yue1,this.yue2,this.yue3);
        this.getEcharsWcl(this.yue1,this.yue2,this.yue3)

      })
    },
    close(status) {
      this.markers.map(function (item) {
        if (item.id == status) {
          item.showFlag = false;
        }
        return item;
      })
    },
    infoWindowClose(marker, markers) {

      this.markers = markers.map(function (item) {
        if (item.id == marker.id) {
          marker.showFlag = true;
        } else {
          item.showFlag = false;
        }
        return item;
      })
      // marker.showFlag = !marker.showFlag
    },
    infoWindowOpen(marker) {
      marker.showFlag = true
    },
    handler({BMap, map}) {

    },
    draw({el, BMap, map}) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(107.241123, 34.366293))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    getInfo() {
      listInfo_common("").then(res => {
        //console.log(res.rows)
        var arr = []
        for (var i = 0; i < res.rows.length; i++) {
          arr.push(
            {
              longitude: res.rows[i].epLg,
              latitude: res.rows[i].epLt,
              scenicName: res.rows[i].epName,
              showFlag: false,
              id: res.rows[i].epId,
              userName: res.rows[i].epUserName
            }
          )
        }

        this.markers = arr;
      })
    },
    getEcharsTs(value1,value2,value3){

      var that=this;

      this.commandstats = echarts.init(this.$refs.commandstats2, "macarons");
      this.commandstats.setOption({
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,

              borderWidth: 2,
              normal: {//颜色渐变

                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#00FE9D'},
                    {offset: 0.5, color: '#02BFF1'},
                    {offset: 1, color: '#339CFF'}
                  ]
                )
              }
            },
            label: {
              show: false,
              position: 'center',
              textStyle: { //图例文字的样式
                color: '#fff',
                fontSize: 12
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '10',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              // {value: value3, name: '搜索引擎', itemStyle: {color: 'rgb(110, 112, 116)'}},
              // {value: value2, name: '搜索引擎2',},
              {value: value1, name: '搜索引擎3'},

            ]
          }

        ]

      });
    },
    getEcharsYcl(value1,value2,value3){

      var that=this;

      this.commandstats = echarts.init(this.$refs.commandstats3, "macarons");
      this.commandstats.setOption({
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,

              borderWidth: 2,
              normal: {//颜色渐变

                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#00FE9D'},
                    {offset: 0.5, color: '#02BFF1'},
                    {offset: 1, color: '#339CFF'}
                  ]
                )
              }
            },
            label: {
              show: false,
              position: 'center',
              textStyle: { //图例文字的样式
                color: '#fff',
                fontSize: 12
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '10',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: value3, name: '搜索引擎',},

              {value: value1, name: '搜索引擎3',itemStyle: {color: 'transparent'}},

            ]
          }

        ]

      });
    },
    getEcharsWcl(value1,value2,value3){

      var that=this;

      this.commandstats = echarts.init(this.$refs.commandstats4, "macarons");
      this.commandstats.setOption({
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,

              borderWidth: 2,
              normal: {//颜色渐变

                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#00FE9D'},
                    {offset: 0.5, color: '#02BFF1'},
                    {offset: 1, color: '#339CFF'}
                  ]
                )
              }
            },
            label: {
              show: false,
              position: 'center',
              textStyle: { //图例文字的样式
                color: '#fff',
                fontSize: 12
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '10',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
             // {value: value3, name: '搜索引擎', itemStyle: {color: 'rgb(110, 112, 116)'}},
              {value: value2, name: '搜索引擎2',},
              {value: value1, name: '搜索引擎3',itemStyle: {color: 'transparent'}},

            ]
          }

        ]

      });
    },
    getEchars() {
      this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
      this.commandstats.setOption({
        color: ['#00FDDC', '#DF7809', '#00CCFF', '#00FF18', '#38D866', 'rgb(183 135 177)',
          'rgb(215, 171, 130)',
          'rgb(110, 112, 116)',
          'rgb(183 135 177)'],
        series:

          [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['20%', '90%'],

              roseType: 'area',
              itemStyle: {
                borderRadius: 10,

                borderWidth: 20
              },
              data: [
                {value: 1048, name: '1区'},
                {value: 735, name: '2区'},
                {value: 580, name: '3区'},
                {value: 484, name: '4区'},
                {value: 300, name: '5区'},
                {value: 900, name: '6区'},
                {value: 300, name: '7区'}
                // {value: 40, name: '1区'},
                // {value: 38, name: '2区'},
                // {value: 32, name: '3区'},
                // {value: 30, name: '4区'},
                //  {value:38, name: '5区'},
                // {value: 32, name: '6区'},
                // {value: 30, name: '7区'},

              ]
            }
          ]

      });
      // this.commandstats = echarts.init(this.$refs.commandstats2, "macarons");
      // this.commandstats.setOption({
      //   series: [
      //     {
      //       name: '访问来源',
      //       type: 'pie',
      //       radius: ['40%', '70%'],
      //       avoidLabelOverlap: false,
      //       itemStyle: {
      //         borderRadius: 10,
      //
      //         borderWidth: 2,
      //         normal: {//颜色渐变
      //
      //           color: new echarts.graphic.LinearGradient(
      //             0, 0, 0, 1,
      //             [
      //               {offset: 0, color: '#00FE9D'},
      //               {offset: 0.5, color: '#02BFF1'},
      //               {offset: 1, color: '#339CFF'}
      //             ]
      //           )
      //         }
      //       },
      //       label: {
      //         show: false,
      //         position: 'center',
      //         textStyle: { //图例文字的样式
      //           color: '#fff',
      //           fontSize: 12
      //         },
      //       },
      //       emphasis: {
      //         label: {
      //           show: true,
      //           fontSize: '10',
      //           fontWeight: 'bold'
      //         }
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       data: [
      //         {value: 45, name: '搜索引擎'},
      //         {value: 66, name: '搜索引擎2', itemStyle: {color: 'transparent'}},
      //
      //       ]
      //     }
      //
      //   ]
      //
      // });
      // this.commandstats = echarts.init(this.$refs.commandstats3, "macarons");
      // this.commandstats.setOption({
      //   color: ['red', 'blue'],
      //   series: [
      //     {
      //       name: '访问来源',
      //       type: 'pie',
      //       radius: ['40%', '70%'],
      //       avoidLabelOverlap: false,
      //       itemStyle: {
      //         borderRadius: 10,
      //
      //         borderWidth: 2,
      //         normal: {//颜色渐变
      //           color: new echarts.graphic.LinearGradient(
      //             0, 0, 0, 1,
      //             [
      //               {offset: 0, color: '#00FE9D'},
      //               {offset: 0.5, color: '#02BFF1'},
      //               {offset: 1, color: '#339CFF'}
      //             ]
      //           )
      //         }
      //       },
      //       label: {
      //         show: false,
      //         position: 'center',
      //         textStyle: { //图例文字的样式
      //           color: '#fff',
      //           fontSize: 12
      //         },
      //       },
      //       emphasis: {
      //         label: {
      //           show: true,
      //           fontSize: '10',
      //           fontWeight: 'bold'
      //         }
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       data: [
      //         {value: 92, name: '搜索引擎'},
      //         {value: 8, name: '搜索引擎2', itemStyle: {color: 'transparent'}},
      //       ]
      //     },
      //
      //   ]
      //
      // });
      // this.commandstats = echarts.init(this.$refs.commandstats4, "macarons");
      // this.commandstats.setOption({
      //
      //
      //   series: [
      //     {
      //       name: '访问来源',
      //       type: 'pie',
      //       radius: ['40%', '70%'],
      //       avoidLabelOverlap: false,
      //       itemStyle: {
      //         borderRadius: 10,
      //
      //         borderWidth: 2,
      //         normal: {//颜色渐变
      //
      //           color: new echarts.graphic.LinearGradient(
      //             0, 0, 0, 1,
      //             [
      //               {offset: 0, color: '#00FE9D'},
      //               {offset: 0.5, color: '#02BFF1'},
      //               {offset: 1, color: '#339CFF'}
      //             ]
      //           )
      //         }
      //
      //       },
      //       label: {
      //         show: false,
      //         position: 'center',
      //         textStyle: { //图例文字的样式
      //           color: '#fff',
      //           fontSize: 12
      //         },
      //       },
      //       emphasis: {
      //         label: {
      //           show: true,
      //           fontSize: '10',
      //           fontWeight: 'bold'
      //         }
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       data: [
      //         {value: 98, name: '搜索引擎'},
      //         {value: 8, name: '搜索引擎2', itemStyle: {color: 'transparent'}},
      //
      //       ]
      //     }
      //   ]
      //
      // });
      this.commandstats = echarts.init(this.$refs.commandstats5, "macarons");
      this.commandstats.setOption({

        color: ['#A541FF', '#2DF8FF', '#02A1F9', '#00C29B'],
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },

        legend: {
          data: ['PM2.5', 'PM10', 'SO2', 'NO2', 'CO', 'O3', '温度','湿度','风速'],
          textStyle: {
            color: '#fff',
          }
        },
        toolbox: {},
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            splitLine: {show: false},
            data: ['PM2.5', 'PM10', 'SO2', 'NO2', 'CO', 'O3', '温度','湿度','风速'],
            axisLine: {
              lineStyle: {
                color: '#fff',

              }
            }

          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)',


              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff',


              }
            }
          }
        ],
        series: [
          {
            name: 'PM2.5',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.2,
              color: new echarts.graphic.LinearGradient(0, 0, 0, .3, [{
                offset: 0,
                color: '#3FBBFE'
              }, {
                offset: 1,
                color: '#A541FF'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230,120,230,120]
          },
          {
            name: 'PM10',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#1B76FF'
              }, {
                offset: 1,
                color: '#2DF8FF'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230,120,230,120]
          },
          {
            name: 'SO2',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#29F19C'
              }, {
                offset: 1,
                color: '#02A1F9'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230,120,230,120]
          },
          {
            name: 'NO2',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#88FF88'
              }, {
                offset: 1,
                color: '#00C29B'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230,120,230,120]
          },
          {
            name: 'CO',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.2,
              color: new echarts.graphic.LinearGradient(0, 0, 0, .3, [{
                offset: 0,
                color: '#3FBBFE'
              }, {
                offset: 1,
                color: '#A541FF'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
            name: 'O3',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#1B76FF'
              }, {
                offset: 1,
                color: '#2DF8FF'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [10, 282, 111, 234, 220, 30, 31]
          },
          {
            name: '温度',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#29F19C'
              }, {
                offset: 1,
                color: '#02A1F9'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 132, 201, 334, 90, 130, 20]
          },
          {
            name: '湿度',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#88FF88'
              }, {
                offset: 1,
                color: '#00C29B'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230,120,230,120]
          },
          {
            name: '风速',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#88FF88'
              }, {
                offset: 1,
                color: '#00C29B'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230,120,230,120]
          },
        ]
      });
    },
  }
}
</script>

<style scoped>
.map {

  width: 100%;
  height: 100vh;
  z-index: 100;

}

.map-content {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.78);
}

.item-title {
  width: 500px;
  height: 38px;
  text-align: center;
  line-height: 38px;
  color: #fff;
  margin: 0 auto;
  background: url("~@/assets/s-title-bg.png") no-repeat;
  /*background-size: 100% 100%;*/
}

.item-header {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #fff;
  width: 100%;
  height: 62px;
  line-height: 62px;
  background: url("~@/assets/title-bg.png") no-repeat;
  background-size: 100% 100%;
}

.item-content {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.78);
  /*z-index: 10;*/
}

.item-big-box {
  width: 100%;
  height: 100%;
  opacity: 1;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #0f2e4b;
  border: 1px solid #054988;
  border-radius: 5px;
}

.item-left {
  position: relative;
  z-index: 10;
  float: left;
  width: 27%;
  display: flex;
  height: 93vh;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 9px;
}

.item-right {
  position: relative;
  z-index: 10;
  float: right;
  width: 27%;
  display: flex;
  margin-right: 9px;
  height: 93vh;
  flex-direction: column;
  justify-content: space-between;
}

.item-left-Box {
  width: 100%;
  height: 49%;

}

.item-left-right {
  width: 100%;
  height: 600px;

}

.echarsPie {
  margin-top: 30px;
}

.complaint {
  display: flex;
  justify-content: space-around;
}

.complaint-item {
  width: 33.333%;
  height: 200px;
}

.complaint-item-title {
  font-size: 14px;
  color: #fff;
  text-align: center;
}

.conmplaint-mouth {
  width: 300px;
  color: #fff;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.conmplaint-mouth-title {
  width: 67px;
  height: 33px;
  line-height: 33px;
  text-align: center;
}

.border {
  width: 67px;
  height: 33px;
  opacity: 1;
  border: 1px solid #03bff2;
  border-radius: 18px;
}

.conmplaint-line {
  width: 90%;
  display: flex;
}

.conmplaint-line .line {
  position: relative;
  width: 300px;
  height: 16px;

  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.conmplaint-line .l-line {
  position: absolute;
  left: 0;
  top: 0;
  /*width: 50%;*/
  height: 16px;
  opacity: 1;
  transition: all 1s;
  background: linear-gradient(-18deg, #03bbff 0%, #6e89ff 100%);
  border-radius: 8px;
}

.line-title {
  width:80px;
  opacity: 1;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #00d7e1;
  margin-right: 5px;
}

.line-number {
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: right;
  color: #00d7e1;
  margin-left: 5px;

}

.conmplaint-line {
  margin: 0 auto;
  margin-top: 22px;
}

.item-center {
  position: absolute;
  z-index: 10;
  width: 42%;
  height: 340px;
  left: 50%;
  margin-left: -21%;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #0f2e4b;
  border: 1px solid #054988;
  border-radius: 5px;
}

.item-order {
  width: 90%;
  height: 66px;
  background: rgba(41, 113, 183, .4);

  margin: 0 auto;
  margin-bottom: 20px;
  display: flex;
  /*align-content: center;*/
  align-items: center;
  justify-content: space-between;
  padding-left: 17px;
  padding-right: 17px;

}

.item-order-number {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*line-height: 35px;*/
  text-align: center;
  color: #00e4ff;
  /*background: rgba(0,210,255,0.20);*/
  /*border: 1px solid #00f0ff;*/
  border-radius: 50%;
  margin-right: 19px;
}

.item-order-number-item {
  background: url("~@/assets/equipment-blue.png") no-repeat;
}

.equipment-yellow {
  color: #F5DD05;
  background: url("~@/assets/equipment-yellow.png") no-repeat;
}

.equipment-red {
  /*equipment-red*/
  color: #FF0030;
  background: url("~@/assets/equipment-red.png") no-repeat;
}

.item-o-t {

  font-size: 15px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #ffffff;

  letter-spacing: 1px;
}

.item-order-subtitle {
  font-size: 15px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;


  color: #00f0ff;
}

.item-order-button {
  width: 79px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 14px;
  /*margin-bottom: 20px;*/
  background: rgba(0, 210, 255, 0.20);
  border: 1px solid #00f0ff;
  border-radius: 13px;
  background: url("~@/assets/btn.png") no-repeat;
}

.item-big-box-t {
  width: 80%;
  height: 80%;
  margin: 0 auto;
  margin-top: 40px;
  display: flex;
  border: 1px solid rgba(0, 207, 218, .18);;

}

.item-big-box-count {
  width: 50%;
  height: 80%;
  /*margin-top: 6%;*/

}

.item-big-box-count:nth-child(2) {
  height: 100%;
  border-left: 1px solid rgba(0, 207, 218, .18);
  margin: 0;
}

.item-big-box-count img {
  width: 100%;
}

.i-b-c-c {
  width: 100%;
  box-sizing: border-box;
  padding-left: 10%;
  padding-right: 10%;

  border-bottom: 1px solid rgba(0, 207, 218, .18);
  display: flex;
  justify-content: space-around;
  /* border-top: 1px solid #00cfda; */
  height: 25%;
  line-height: 6vh;
  font-size: 16px;
  font-family: Source Han Sans CN, Source Han Sans CN-Light;
  font-weight: 300;
  text-align: left;
  color: #00eaf3;
}

.item-b-box-c {
  width: 90%;
  height: 90%;
  border: 1px solid #00CFDA;
  display: flex;

}

.cityIcon2 {
  width: 100%;
  height: 199px;
  margin: 0 auto;
  margin-top: 10%;
  background: url("~@/assets/cityIcon.png") no-repeat;
  background-size: 100% 100%;
}

.i-b-b-c {


}

.order-blue {

  background: linear-gradient(#08AEEA, #2AF598);
  /*background:linear-gradient('#08AEEA','#2AF598');*/
}

@-webkit-keyframes bigAssButtonPulse {
  from {
    background-color: #749a02;
    -webkit-box-shadow: 0 0 25px #333;
  }
  50% {
    background-color: #91bd09;
    -webkit-box-shadow: 0 0 50px #91bd09;
  }
  to {
    background-color: #749a02;
    -webkit-box-shadow: 0 0 25px #333;
  }
}

@-webkit-keyframes greenPulse {
  from {
    background-color: #749a02;
    -webkit-box-shadow: 0 0 9px #333;
  }
  50% {
    background-color: #91bd09;
    -webkit-box-shadow: 0 0 18px #91bd09;
  }
  to {
    background-color: #749a02;
    -webkit-box-shadow: 0 0 9px #333;
  }
}

@-webkit-keyframes bluePulse {
  from {
    background-color: #007d9a;
    -webkit-box-shadow: 0 0 9px #333;
  }
  50% {
    background-color: #2daebf;
    -webkit-box-shadow: 0 0 18px #2daebf;
  }
  to {
    background-color: #007d9a;
    -webkit-box-shadow: 0 0 9px #333;
  }
}

@-webkit-keyframes redPulse {
  from {
    background-color: #bc330d;
    -webkit-box-shadow: 0 0 9px #333;
  }
  50% {
    background-color: #e33100;
    -webkit-box-shadow: 0 0 18px #e33100;
  }
  to {
    background-color: #bc330d;
    -webkit-box-shadow: 0 0 9px #333;
  }
}

@-webkit-keyframes magentaPulse {
  from {
    background-color: #630030;
    -webkit-box-shadow: 0 0 9px #333;
  }
  50% {
    background-color: #a9014b;
    -webkit-box-shadow: 0 0 18px #a9014b;
  }
  to {
    background-color: #630030;
    -webkit-box-shadow: 0 0 9px #333;
  }
}

@-webkit-keyframes orangePulse {
  from {
    background-color: #d45500;
    -webkit-box-shadow: 0 0 9px #333;
  }
  50% {
    background-color: #ff5c00;
    -webkit-box-shadow: 0 0 18px #ff5c00;
  }
  to {
    background-color: #d45500;
    -webkit-box-shadow: 0 0 9px #333;
  }
}

@-webkit-keyframes orangellowPulse {
  from {
    background-color: #fc9200;
    -webkit-box-shadow: 0 0 9px #333;
  }
  50% {
    background-color: #ffb515;
    -webkit-box-shadow: 0 0 18px #ffb515;
  }
  to {
    background-color: #fc9200;
    -webkit-box-shadow: 0 0 9px #333;
  }
}

a .button {
  -webkit-animation-duration: 2s;
  animation-iteration-count: infinite;
}

.green.button {
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
}

.blue.button {
  -webkit-animation-name: bluePulse;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
}

.red.button {
  -webkit-animation-name: redPulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  border: 1px solid #e33100;
}

.magenta.button {
  -webkit-animation-name: magentaPulse;
  -webkit-animation-duration: 2s;
}

.orange.button {
  -webkit-animation-name: orangePulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
}

.orangellow.button {
  -webkit-animation-name: orangellowPulse;
  -webkit-animation-duration: 5s;
}

.wall-of-buttons {
  width: 100%;
  height: 180px;
  text-align: center;
}

.sample {
  width: 260px;
  height: 340px;
  /*line-height: 40px;*/
  background: rgba(15, 46, 75, 0.50);
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: red;
  text-align: center;
  padding: 10px;
  position: absolute;


  border: 1px solid #054988;
  border-radius: 5px;
}

/*.sample.active {*/
/*  background: rgba(0,0,0,0.75);*/
/*  color: #fff;*/
/*}*/
</style>
